<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" type="text/css" href="../../../css/mui.min.css" />
		<link rel="stylesheet" type="text/css" href="../../../css/mescroll.min.css" />
		<link rel="stylesheet" type="text/css" href="../../../css/pages/home/miantain.css" />
	</head>

	<body>

		<div id="app">
			<!-- <div ref="scrollxContent" class="scrollx-content">
				<div id="nav" class="nav">
					<div class="item" 
					v-for="(item, index) in tabList" 
					:class="lhtID==item.lhtID?'active':''" 
					@click="navClick(index,$event,item.lhtID)">
					{{item.lhtName}}</div>
				</div>
			</div> -->
			
			<div class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
				<div class="mui-scroll">
					<div class="img-wapper margin-top15 ">
						<div id="nav" class="nav">
							<div class="item" 
							v-for="(item, index) in tabList" 
							:class="lhtID==item.lhtID?'active':''" 
							@click="navClick(index,$event,item.lhtID)">
							{{item.lhtName}}</div>
						</div>
					</div>
				</div>
			</div>
			
			<div class="sub-content">
				<div id="mescroll" class="mescroll">
					<div class="list">
						<div class="list-item" v-for="item in cateList" @click="itemClick(item)">
							<div class="item-warpper">
								<div class="item-image">
									<img :src="item.path">
								</div>
								<div class="item-desc">
									<span class="title" v-text="item.lawhName"></span>
									<div class="flex-sal">
										<span class="price">{{item.lawhPriceUnit}}</span>
										<span class="distance font-c-ad">{{item.distance | toFixed}}</span>
									</div>
									<span class="font-12 font-c-ad">已服务{{item.lawhServeNumber}}人</span>
									<div class="item-map">
										<img src="../../../images/map.png">
										<span class="font-12 font-c-ad">{{item.lawhDetails}}</span>
									</div>
								</div>
							</div>
						</div>
					</div>
					<div v-show="isList" class="p-30 font-c-7f font-12" style="text-align: center;"> -- 暂无相关数据 -- </div>
				</div>
			</div>
		</div>

		<script src="../../../js/Width.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../../js/mui.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../../js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../../js/mescroll.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../../js/Util.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../../js/getDistance.js" type="text/javascript" charset="utf-8"></script>
		<script src="https://cdn.bootcss.com/fastclick/1.0.6/fastclick.min.js"></script>

		<script type="text/javascript">
			mui.init()
			var mescroll;
			mui.plusReady(function() {
				if (!mui.os.android) {
					FastClick.attach(document.body);
				}
				GetLawHallType()
				plus.geolocation.getCurrentPosition(function(p) {
					var latitude = p.coords.latitude;
					var longitude = p.coords.longitude;
					if (mui.os.ios) {
						var data = wgs84togcj02(longitude, latitude)
						latitude = data[1];
						longitude = data[0];
					}
					console.log(latitude)
					app.latitude = Number(latitude.toString().match(/^\d+(?:\.\d{0,6})?/));
					app.longitude = Number(longitude.toString().match(/^\d+(?:\.\d{0,6})?/));
					app.GetLawHall()
				}, function(e) {
					alert('Geolocation error: ' + e.message);
				});
				mescroll = new MeScroll("mescroll", {
					down: {
						auto: false,
						callback: downCallback
					},
					up: {
						auto: false,
					}
				})
			})

			function downCallback() {
				app.GetLawHall()
			}


			function GetLawHallType() {
				console.log("执行+")
				mui.post(Util.HTTP + 'api/LawHall/GetLawHallType', {}, function(res) {
					if (res.code == 1001) {
						app.lhtID = res.data[0].lhtID
						app.tabList = res.data
					} else {
						mui.toast(res.message)
					}
				})
			}

			var app = new Vue({
				el: '#app',
				data: {
					num: 0,
					isList: false,
					lhtID: '',
					latitude: '',
					longitude: '',
					tabList: [],
					cateList: []
				},
				watch: {
					lhtID: function(v, l) {
						if (this.num > 0) {
							this.isList = false
							this.GetLawHall()
						}
						this.num = 1
					}
				},
				filters: {
					toFixed: function(value) {
						var number = Number(value.toString().match(/^\d+(?:\.\d{0,2})?/));
						return number > 1 ? number + 'km' : number * 1000 + 'm'
					}
				},
				methods: {
					navClick: function(index, event, lhtID) {
// 						var scrollxContent = this.$refs.scrollxContent
// 						var star = scrollxContent.scrollLeft //当前位置
// 						var end = event.currentTarget.offsetLeft + event.currentTarget.clientWidth / 2 - document.body.clientWidth / 2; //居中
// 						scrollxContent.scrollLeft = end
						this.lhtID = lhtID
					},
					GetLawHall: function() {
						plus.nativeUI.showWaiting('加载中', {
							width: '100px',
							height: '100px'
						});
						var that = this
						that.cateList = []
						mui.post(Util.HTTP + 'api/LawHall/GetLawHall', {
							lhtID: that.lhtID,
							lawhLng: that.longitude,
							lawhLat: that.latitude
						}, function(res) {
							if (res.code == 1001) {
								plus.nativeUI.closeWaiting();
								res.data.forEach(function(item, index) {
									item.distance = getDistance(item.lawhLng, item.lawhLat, that.longitude, that.latitude)
								})

								that.isList = res.data.length == 0 ? true : false
								that.cateList = res.data
								mescroll.endSuccess(); //无参
							} else {
								mui.toast(res.message)
							}
						})
					},
					itemClick: function(item) {
						mui.openWindow({
							url: 'maintain-detail.html',
							id: 'maintain-detail.html',
							styles: { // 窗口参数 参考5+规范中的WebviewStyle,也就是说WebviewStyle下的参数都可以在此设置
								titleNView: { // 窗口的标题栏控件
									titleText: "详情", // 标题栏文字,当不设置此属性时，默认加载当前页面的标题，并自动更新页面的标题         // 字体颜色,颜色值格式为"#RRGGBB",默认值为"#000000"
									titleSize: "17px", // 字体大小,默认17px
									type: 'transparent',
									backgroundColor: "#ffffff", // 控件背景颜色,颜色值格式为"#RRGGBB",默认值为"#F7F7F7"
									autoBackButton: true,
									splitLine: { // 标题栏控件的底部分割线，类似borderBottom
										color: "#eeeeee", // 分割线颜色,默认值为"#CCCCCC"  
										height: "1px" // 分割线高度,默认值为"2px"
									}
								}
							},
							extras: {
								detailID: item.lawhID,
							},
							waiting: {
								autoShow: false
							}
						})
					}
				}
			})
		</script>
	</body>

</html>
